<template>
  <div class="login">
    <el-card>
      <div class="header">
        <div class="titleImg">
          <img src="../../assets/login_title.png" alt="">
        </div>
        <div class="title">
          <span>黑马面面 | 用户登陆</span>
        </div>
      </div>
      <el-form
        ref="ruleForm"
        status-icon
        label-width="100px"
        class="demo-ruleForm"
        :rules="rules"
        :model="form"
      >
        <el-form-item prop="phone">
          <el-input v-model="form.phone" prefix-icon="el-icon-user" type="text" autocomplete="off" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="form.password" prefix-icon="el-icon-lock" type="password" autocomplete="off" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item class="code" prop="code">
          <el-input v-model="form.code" prefix-icon="el-icon-key" type="text" autocomplete="off" placeholder="请输入验证码" />
          <img :src="authCode" alt="" width="131px" height="40px" @click="getAuthCode">
        </el-form-item>
        <el-form-item prop="checked">
          <el-checkbox v-model="form.checked" class="checkbox">我已阅读并同意<span>用户协议</span>和<span>隐私条款</span></el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button class="btn-login" type="primary" @click="submitForm">提交</el-button>
        </el-form-item>
        <el-form-item>
          <el-button class="btn-login" type="primary">注册</el-button>
        </el-form-item>

      </el-form>
    </el-card>
    <div class="loginImg">
      <img src="../../assets/login.png" alt="">
    </div>
  </div>
</template>

<script>
import { getAuthCode } from '@/api/login'
export default {
  data() {
    const checked = (rule, value, callback) => {
      if (value === true) {
        callback()
      } else {
        console.log(111)
        callback('校验不通过')
      }
    }
    return {
      form: {
        phone: '18511111111',
        password: '12345678',
        code: '',
        checked: false
      },
      authCode: '',
      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '手机号不规范', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ],
        checked: [
          { validator: checked, trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.getAuthCode()
  },
  methods: {
    async submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$store.dispatch('user/login', this.form)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 获取验证码图片
    async getAuthCode() {
      const res = await getAuthCode()
      this.authCode = `data: image/jpeg;base64,${btoa(
        new Uint8Array(res).reduce(
          (data, byte) => data + String.fromCharCode(byte),
          ''
        )
      )}`
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep{
.el-card{
  background: #f5f5f5;
  .el-card__body{
    width: 394px;
    height: 462px;
    margin: 44px 42px;
    padding: 0;
  }
  .el-form-item__content{
    margin: 0 !important;
  }
}
.code .el-form-item__content{
  display: flex;
}
}
.checkbox span{
  color: #409eff;
}
.btn-login {
      width: 100%;
      height: 40px;
    }
.login{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: linear-gradient(#1493fa 28%,#01c6fa 96%);
  .loginImg{
    width: 633px;
    height: 435px;
  }
  .header{
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    .title{
      margin-left: 10px;
      font-size: 24px;
    }
  }
  el-form{
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
